We're using cookies, but you can turn them off in your browser settings. Otherwise, you are agreeing to our use of cookies. Learn more in our Privacy Policy.

Form Patterns

We want to make the process of data entry as easy as possible. These guidelines can significantly increase form usability and lead to a better overall experience.

  • Single Column. Forms should be designed using a single-column approach (not multiple columns). There will be a few exceptions to this rule. When in doubt, use a single column approach.
  • Visible Labels. All form elements and fields should have a corresponding label. Labels should always be visible. If using inline labels, make sure the label floats to the top on focus.
  • Think Tappable. Input fields should be 32px tall or taller. Larger fields and more visual separation will be more tappable and easier to navigate on mobile.
  • Input Size. Input fields should match their expected value. A form that sizes the input fields according to their expected input is easier to read. Do not make input boxes 100% wide unless warranted.
  • Input Type. Use the proper input type to make sure the appropriate keyboard is triggered on mobile. Use “search”, “tel”, “email”, “url” and “number”.
  • Input Clarity. If needed, provide an explanation of expected data/format (micro-copy) below the field.
  • Placeholder Text. Avoid using placeholder text. Empty fields draw more attention and users are a lot less likely to skip. Use micro-copy or helper text if/when needed instead.
  • Minimize Input. Don’t ask for data that isn't needed. Entering data into forms is a chore. More fields = Less fun.
  • Required Fields. Clearly distinguish required fields from optional fields. We use the red asterisk( ) character next to the label to indicate required fields.
  • Error Messaging. Provide both a general error message at the top of the form as well as field-specific explanations that highlight what is wrong with the specific input. When an error is generated, make sure the general error message block is at the top of the user’s viewport. (See Form Validation page.)

Indicates A Required Field Note

indicates a required field

HTML

<p><span class="required"></span> indicates a required field</p>

Problem Being Solved

Users need a note to explain that the superscript red asterisk indicates a required form input.

When to Use

Use this once at the beginning of a form that has required inputs. Place this before the fieldset tags.

Fieldsets and Legends

Fieldsets and Legends
First Name
Last Name

Code

<fieldset>
    <legend>Legend Text</legend>

    <div class="form-group">
    <label class="control-label required" for="text-input-first">Label Text</label>
        <span id="text-input-first-help-block" class="help-block">Descriptive text</span>
        <input id="text-input-first" type="text" class="form-control" aria_describedby="text-input-first-help-block" aria-required="true" required="required" />
    </div>
</fieldset>

Problem Being Solved

Users need forms that are scannable and highly accessible.

When to Use

Using fieldset and legend is required whenever grouping related form controls. It makes the form more understandable for all users, including those using screen readers.

When Not to Use

Because fieldset and legend have a specific meaning within HTML, they should never be used for anything but a form.

Text Fields

Text Fields
Descriptive text can display here
Descriptive text can display here
Descriptive text can display here

HTML

<fieldset>
    <legend>Text Fields</legend>

    <div class="form-group">
        <label class="control-label required" for="text-input-3">Text Field</label>
        <span id="text-input-3-help-block" class="help-block">Descriptive text can display here</span>
        <input id="text-input-3" type="text" class="form-control max-length" maxlength=10 aria_describedby="text-input-3-help-block" aria-required="true" required />
    </div>

    <div class="form-group form-inline">
        <label class="control-label" for="inline-text-1">Inline Text Field</label>
        <span id="inline-text-1-help-block" class="help-block">Descriptive text can display here</span>
        <input id="inline-text-1" type="text" class="form-control max-length" maxlength=10 aria_describedby="inline-text-1-help-block" />
    </div>

    <div class="form-group">
        <label class="control-label" for="text-area-1">Text Area</label>
        <span id="text-area-1-help-block" class="help-block">Descriptive text can display here</span>
        <textarea id="text-area-1" class="form-control" aria_describedby="text-area-1-help-block"></textarea>
    </div>
</fieldset>

Problem Being Solved

The user needs to enter text values.

When to Use

  • This pattern is used to allow the user to enter short strings of text. Inputs should be restricted when appropriate. For example, if the user is entering a year, input should be restricted to integers only.
  • Use a textarea element when more text is required.

When Not to Use

If a more restrictive pattern (such as radio buttons) prevents user error or increases data quality, then that pattern should be used instead.

Inline Form Layout (Bootstrap)

Inline Form Legend
Example Label
Text help block
Text help block
Text help block

HTML

<fieldset>
    <legend>Inline Form Legend</legend>

    <div class="form-group">
        <div id="inline-input-label" class="control-label required">Example Label</div>
        <div class="form-inline row validation-input-container">
            <div class="col-sm-4 col-md-4">
                <span id="inline-input-1-help-block" class="help-block">Text help block</span>
                <input id="inline-input-1" class="form-control" type="text" aria-describedby="inline-input-help-block" aria-labelledby="inline-input-label" aria-required="true" required="required" />
            </div>
            <div class="col-sm-4 col-md-4">
                <span id="inline-input-2-help-block" class="help-block">Text help block</span>
                <input id="inline-input-2" class="form-control" type="text" aria-describedby="inline-input-2-help-block" aria-labelledby="inline-input-label" aria-required="true" required="required" />
            </div>
            <div class="col-sm-4 col-md-4">
                <span id="inline-input-2-help-block" class="help-block">Text help block</span>
                <input id="inline-input-2" class="form-control" type="text" aria-describedby="inline-input-2-help-block" aria-labelledby="inline-input-label" aria-required="true" required="required" />
            </div>
        </div>
    </div>
</fieldset>

Problem Being Solved

We need to display two or more form inputs in an inline layout.

When to Use

Use when and if our default stacked layout does not work for the requested design.

Formatting

Boostrap classes determin the width of the inline input containers — adjust as needed.

Side-by-Side Form Inputs

Example: Side-by-Side Form with Text Inputs

Descriptive text can display here
Descriptive text can display here

Example: Side-by-Side Form with Dropdown Select

Descriptive text can display here
Descriptive text can display here

HTML

<!-- Inline form with text inputs -->
<div class="inline-form validation-input-container">
  <div class="field-one">
      <div class="form-group">
        <label class="control-label required" for="text-input-1">Text field</label>
        <span id="text-input-1-help-block" class="help-block">Descriptive text can display here</span>
        <input id="text-input-1" type="text" class="form-control" aria_describedby="text-input-1-help-block" aria-required="true" required="required" />
      </div>
  </div>
  <div class="field-two">
      <div class="form-group">
        <label class="control-label required" for="text-input-2">Text field</label>
        <span id="text-input-2-help-block" class="help-block">Descriptive text can display here</span>
        <input id="text-input-2" type="text" class="form-control" aria_describedby="text-input-2-help-block" aria-required="true" required="required" />
      </div>
  </div>
  <div class="user-agreement optional-field">
      <div class="form-group">
          <label class="control-label required" for="agree-checkbox">Terms and Conditions</label>
          <div class="checkbox">
              <label>
                  <input id="agree-checkbox" type="checkbox" value="" aria-describedby="terms-and-conditions-label" aria-required="true" required="required" />
                  <span id="terms-and-conditions-label" class="checkbox-label">I agree to the following Terms and Conditions:
                  <br />
                  <br />
                      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
                  </span>
              </label>
          </div>
      </div>
  </div>
  <div class="field-button">
      <button type="button">Button</button>
  </div>
</div>

<!-- Inline form with dropdown select -->
<div class="inline-form validation-input-container">
  <div class="field-one">
      <div class="form-group">
          <label class="control-label required" for="dropdown-input-1">Select List</label>
          <span id="select-list-1-help-block" class="help-block">Descriptive text can display here</span>
          <select id="dropdown-input-1" class="form-control" aria-describedby="select-list-1-help-block" aria-required="true" required="required">
              <option value=""></option>
              <option value="1">
                  Employer type 1
              </option>
              [...]
              <option value="5">
                  Employer type 5
              </option>
              <option value="Other">
                  Other
              </option>
          </select>
      </div>
  </div>
  <div class="field-two">
      <div class="form-group">
          <label class="control-label required" for="dropdown-input-2">Select List</label>
          <span id="select-list-2-help-block" class="help-block">Descriptive text can display here</span>
          <select id="dropdown-input-2" class="form-control" aria-describedby="select-list-2-help-block" aria-required="true" required="required">
              <option value=""></option>
              <option value="1">
                  Employer type 1
              </option>
              [...]
              <option value="5">
                  Employer type 5
              </option>
              <option value="Other">
                  Other
              </option>
          </select>
      </div>
  </div>
  <div class="field-button">
      <button type="button">Button</button>
  </div>
</div>

Problem Being Solved

We need a way to have text and dropdown select options in a form that also has an optional button.

When to Use

When and if a normal stacked layout doesn't fit the design asthetic.

When Not to Use

  • Do not use multiselect or filter lists right now. Currently working on a solutions for these.
  • Please do not use the max-length helper at this time.

Formatting

The inputs will stack on smaller window sizes.

Checklists

Checklists, Multiselect, and Select All Checkbox
Simple checkbox
Descriptive text can display here
Descriptive text can display here
Select All Checkbox
Select/Deselect all checkboxes in a group.

HTML

<fieldset>
    <legend>Checklists, Multiselect, and Select All Checkbox</legend>

    <div id="checkbox-2" class="form-group">
        <div id="checkbox-color-label" class="control-label">Simple checkbox</div>
        <span id="checkbox-color-help-block" class="help-block">Descriptive text can display here</span>
        <div class="checkbox">
            <label for="red">
                <input id="red" type="checkbox" value="" name="color" aria-labelledby="checkbox-color-label" aria-describedby="checkbox-color-help-block" />
                <span class="checkbox-label">Red</span>
            </label>
        </div>
        <div class="checkbox">
            <label for="green">
                <input id="green" type="checkbox" value="" name="color" checked="checked" aria-labelledby="checkbox-color-label" aria-describedby="checkbox-color-help-block" />
                <span class="checkbox-label">Green</span>
            </label>
        </div>
        <div class="checkbox">
            <label for="blue">
                <input id="blue" type="checkbox" value="" name="color" aria-labelledby="checkbox-color-label" aria-describedby="checkbox-color-help-block" />
                <span class="checkbox-label">Blue</span>
            </label>
        </div>
        <div class="checkbox">
            <label for="orange">
                <input id="orange" type="checkbox" value="" name="color" checked="checked" aria-labelledby="checkbox-color-label" aria-describedby="checkbox-color-help-block" />
                <span class="checkbox-label">Orange</span>
            </label>
        </div>
        <div class="checkbox">
            <label for="disabled">
                <input id="disabled" type="checkbox" value="" name="color" disabled="disabled" aria-labelledby="checkbox-color-label" aria-describedby="checkbox-color-help-block" />
                <span class="checkbox-label">Disabled</span>
            </label>
        </div>
        <div class="checkbox">
            <label for="checked-disabled">
                <input id="checked-disabled" type="checkbox" value="" name="color" disabled="disabled" checked="checked" aria-labelledby="checkbox-color-label" aria-describedby="checkbox-color-help-block" />
                <span class="checkbox-label">Checked Disabled</span>
            </label>
        </div>
    </div>

    <div class="form-group">
        <label class="control-label required" for="multiselect-1">Multiselect list</label>
        <span class="help-block">Descriptive text can display here</span>
        <select id="multiselect-1" multiple="multiple" name="ProfessionalDesignations.SelectedDesignations"  aria-required="true" required="required">
            <option value="ACA — Associate Chartered Accountant">ACA — Associate Chartered Accountant</option>
            <option value="ACCA Qualification">ACCA Qualification</option>
            [...]
            <option value="Other (please specify)">Other (please specify)</option>
        </select>
    </div>

    <div class="form-group select-all-container">
        <div id="select-all-checkbox-label" class="control-label">Select All Checkbox</div>
        <span id="select-all-checkbox-help-block" class="help-block">Select/Deselect all checkboxes in a group.</span>
        <div class="checkbox">
            <label for="selectAllCheckbox">
                <input id="selectAllCheckbox" type="checkbox" value="" name="option1" class="sa-checkbox" aria-labelledby="select-all-checkbox-label" aria-describedby="select-all-checkbox-help-block" />
                <span class="checkbox-label">Select All</span>
            </label>
        </div>
        <div class="checkbox">
            <label for="option1">
                <input id="option1" type="checkbox" value="" name="option1" aria-labelledby="select-all-checkbox-label" aria-describedby="select-all-checkbox-help-block" />
                <span class="checkbox-label">Option 1</span>
            </label>
        </div>
        <div class="checkbox">
            <label for="option2">
                <input id="option2" type="checkbox" value="" name="option2" aria-labelledby="select-all-checkbox-label" aria-describedby="select-all-checkbox-help-block" />
                <span class="checkbox-label">Option 2</span>
            </label>
        </div>
        <div class="checkbox">
            <label for="option3">
                <input id="option3" type="checkbox" value="" name="option3" aria-labelledby="select-all-checkbox-label" aria-describedby="select-all-checkbox-help-block" />
                <span class="checkbox-label">Option 3</span>
            </label>
        </div>
        <div class="checkbox">
            <label for="option4">
                <input id="option4" type="checkbox" value="" name="option4" aria-labelledby="select-all-checkbox-label" aria-describedby="select-all-checkbox-help-block" />
                <span class="checkbox-label">Option 4</span>
            </label>
        </div>
    </div>
</fieldset>

Problem Being Solved

Checklists and Multiselect List

The user needs to select multiple values from a list.

Select-All Checkbox

The user needs to select and/or deselect a group of checkboxes.

When to Use

Checklists and Multiselect List

  • The simple checklist pattern should be used for short lists of one–four options.
  • The multiselect pattern should be used for longer lists of five(plus) options.

Select-All Checkbox

This should be used when a user wants to select/deselect a group of checkboxes.

When Not to Use

Checklists and Multiselect List

If the user is required to select a single value, see the radio button patterns.

Select-All Checkbox

Try not to use this in tables at the moment. The front end team is currently working on a solution for that.

Formatting

Checklists and Multiselect List

  • If you're grouping checkboxes together, make sure they all the same value in the name attribute.
  • Set ViewBag.multiselect = true to load the script for multiselect lists.

Select-All Checkbox

  • The select all checkbox and the group of checkboxes you want associated need to be wrapped in a div with the class "select-all-container."
  • The select all checkbox input needs to have the class "sa-checkbox."

Radio Buttons, Select Lists, and Filter Lists

Radio Buttons, Select Lists, and Filter Lists
Simple Radio Buttons
Descriptive text can display here
Radio Buttons + Content
Radio Buttons + Content Alt
Radio Buttons + Subtitle
Descriptive text can display here
Descriptive text can display here

HTML

<fieldset>
    <legend>Radio Buttons, Select Lists, and Filter Lists</legend>

    <div class="form-group">
        <div id="radio-group" class="control-label required">Simple Radio Buttons</div>
        <span id="radio-help-block" class="help-block">Descriptive text can display here</span>
        <div class="radio">
            <label for="yes">
                <input id="yes" type="radio" name="radio" value="Yes" aria-describedby="radio-help-block" aria-labelledby="radio-group" aria-required="true" required="required" />
                <span class="radio-label">Yes</span>
            </label>
        </div>
        <div class="radio">
            <label for="no">
                <input id="no" type="radio" name="radio" value="No" aria-describedby="radio-help-block" aria-labelledby="radio-group" aria-required="true" required="required" />
                <span class="radio-label">No</span>
            </label>
        </div>
        <div class="radio">
            <label for="prefer-not-to-answer">
                <input id="prefer-not-to-answer" type="radio" name="radio" value="Prefer Not To Answer" aria-describedby="radio-help-block" aria-labelledby="radio-group" aria-required="true" required="required" />
                <span class="radio-label">Prefer not to answer</span>
            </label>
        </div>
        <div class="radio">
            <label for="disabled-radio">
                <input id="disabled-radio" type="radio" name="radiodisabled" value="Disabled" aria-describedby="radio-help-block" aria-labelledby="radio-group" disabled="disabled" aria-required="true" required="required" />
                <span class="radio-label">Disabled</span>
            </label>
        </div>
        <div class="radio">
            <label for="checked-disabled-radio">
                <input id="checked-disabled-radio" type="radio" name="radiodisabled" value="Checked Disabled" aria-describedby="radio-help-block" aria-labelledby="radio-group" disabled="disabled" checked="checked" aria-required="true" required="required" />
                <span class="radio-label">Checked Disabled</span>
            </label>
        </div>
    </div>

    <div class="form-group">
        <div id="radio-group-2" class="control-label required">Radio Buttons + Content</div>
        <div id="radio1" class="radio radio-bordered">
            <label for="bachelors">
                <input id="bachelors" type="radio" name="qualification" value="Bachelors" aria-labelledby="radio-group-2" aria-required="true" required="required" />
                <span class="radio-label"><strong>Bachelors Degree</strong><br />I have completed a bachelor’s degree or equivalent program. Most CFA Program applicants have the education to enroll in graduate studies in the country where they earned their degree, so if you’re not sure if your program is comparable, ask your college or university.</span>
            </label>
        </div>
        <div id="radio2" class="radio radio-bordered">
            <label for="final-year-student">
                <input id="final-year-student" type="radio" name="qualification" value="Final-Year Student" aria-labelledby="radio-group-2" aria-required="true" required="required" />
                <span class="radio-label"><strong>Final-Year Student</strong><br />I am a student in the final year of my bachelor’s degree or equivalent program. I understand that I may register for the Level I Exam, but I must complete my degree program prior to registering for Level II.</span>
            </label>
        </div>
    </div>

    <div class="form-group">
        <div id="radioContentAltLabel" class="control-label required">Radio Buttons + Content Alt</div>
        <div class="radio">
            <label for="radioContentOneAlt">
                <input id="radioContentOneAlt" type="radio" name="radioContentAlt" value="" aria-labelledby="radioContentAltLabel" aria-required="true" required="required" />
                <span class="radio-label">
                    <span class="radio-label-title">Optional Title One</span>
                    <span class="radio-label-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a lacinia arcu, vel pretium sem. Nunc et tortor sed felis consequat imperdiet nec id urna. Quisque sed nulla eget diam suscipit iaculis. Integer efficitur turpis at dictum rhoncus. Curabitur ultricies ligula luctus turpis commodo rutrum. Vestibulum quis hendrerit risus, eget consectetur odio.</span>
                </span>
            </label>
        </div>
        <div class="radio">
            <label for="radioContentTwoAlt">
                <input id="radioContentTwoAlt" type="radio" name="radioContentAlt" value="" aria-labelledby="radioContentAltLabel" aria-required="true" required="required" />
                <span class="radio-label">
                    <span class="radio-label-title">Optional Title Two</span>
                    <span class="radio-label-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a lacinia arcu, vel pretium sem. Nunc et tortor sed felis consequat imperdiet nec id urna. Quisque sed nulla eget diam suscipit iaculis. Integer efficitur turpis at dictum rhoncus. Curabitur ultricies ligula luctus turpis commodo rutrum. Vestibulum quis hendrerit risus, eget consectetur odio.</span>
                </span>
            </label>
        </div>
    </div>


    <div class="form-group">
        <div id="radio-group-3" class="control-label required">Radio Buttons + Subtitle</div>
        <div class="radio">
            <label for="input-radio-3">
                <input id="input-radio-3" type="radio" name="SelectedLocation" value="Richmond" data-msg-required="Please select a test center location." data-rule-required="true" aria-labelledby="radio-group-3" aria-required="true" required="required" />
                <span class="radio-label">Richmond, VA<sub>Thursday, 13 June 2019</sub></span>
            </label>
        </div>
        <div class="radio">
            <label for="input-radio-4">
                <input id="input-radio-4" type="radio" name="SelectedLocation" value="Charlottesville" data-msg-required="Please select a test center location." data-rule-required="true" aria-labelledby="radio-group-3" aria-required="true" required="required" />
                <span class="radio-label">Charlottesville, VA<sub>Friday, 29 June 2019</sub></span>
            </label>
        </div>
    </div>

    <div class="form-group">
        <label class="control-label required" for="dropdown-input-3">Select List</label>
        <span id="dropdown-input-3-help-block" class="help-block">Descriptive text can display here</span>
        <select id="dropdown-input-3" class="form-control" aria-describedby="dropdown-input-3-help-block" aria-required="true" required="required">
            <option value=""></option>
            <option value="1">
                Employer type 1
            </option>
            [...]
            <option value="5">
                Employer type 5
            </option>
            <option value="Other">
                Other
            </option>
        </select>
    </div>

    <label class="control-label required" for="dropdown-input-4">Filter List</label>
    <span id="dropdown-input-4-help-block" class="help-block">Descriptive text can display here</span>
    <div id="filterSelect" class="form-group filter-select">
        <select id="dropdown-input-4" class="form-control filter-select-default" aria-describedby="dropdown-input-4-help-block" aria-required="true" required="required">
            <option></option>
            <option value="1">
                Afghanistan
            </option>
            [...]
            <option value="5">
                American Samoa
            </option>
        </select>
        <div class="filter-select-input hidden">
            <input type="text" />
            <div id="filter-select-results" class="filter-select-results">
                <span class="filter-select-option" data-val="1">Afghanistan</span>
                [...]
                <span class="filter-select-option" data-val="5">American Samoa</span>
            </div>
        </div>
    </div>
</fieldset>

Problem Being Solved

The user needs to select only one value from a list.

When to Use

  • The radio buttons pattern should be used for short lists of 2–4 options.
  • The select list pattern should be used for medium lists of 5–15 options.
  • The filter list or Typeahead patterns should be used for long lists of 16+ options only.

When Not to Use

  • Do not use if multiple options need to be selected.
  • Do not use more than one filter select on the same page.

Form Results—Fields to Be Edited Elsewhere

Example: Stacked (mobile | tablet | desktop)

Control Label

Result Display Area

Control Label

Result with Edit Link Edit Link

Example: Stacked (mobile | desktop)—Inline (tablet | desktop)

Control Label: Result Display Area
Control Label: Result with Edit Link Edit Link

HTML

//stacked at all breakpoints 
<div class="card-standalone mob-card-standalone">
    <h3>Example: Stacked (mobile | tablet | desktop)</h3>

    <div class="form-group">
        <span class="control-label">Control Label</span>
        <p>Result Display Area</p>

        <span class="control-label">Control Label</span>
        <p class="form-control-static">
            Result with Edit Link <span class="edit"><a href="#">Edit Link</a></span>
        </p>
    </div>
</div>

//stacked at mobile and inline at tablet and desktop breakpoints
<div class="card-standalone mob-card-standalone">
    <h3>Example: Stacked (mobile | desktop)—Inline (tablet | desktop)</h3>

    <div class="form-group">
        <div class="control-label">Control Label: <span class="control-label-data">Result Display Area</span></div>

        <div class="control-label">Full Name: <span class="form-control-static control-label-data">Result with Edit Link <span class="edit"><a href="#">Edit Link</a></span></span></div>
    </div>
</div>

Problem Being Solved

  • Not all fields can be edited within a given form.
  • For inline pattern, this layout would be used to help save space on a page, especially if a print view is needed.

When to Use

  • This pattern should be used to display information that must be edited elsewhere (ex: name), or cannot be changed at all (ex: CFA Institute ID).
  • When you need a similar look to fieldset but your content is not in a form.

When Not to Use

If the data can reasonably be made editable within the form, it should be.

Formatting

The inline pattern will stack on smaller viewports.

Date Patterns

Date Patterns
Date Entry Field
Day
Month
Year
Select A Date Range
Date range help text.
to

HTML

<fieldset>
    <legend>Date Patterns</legend>
    <div class="form-group">
        <div id="day-month-year" class="control-label required">Date Entry Field</div>
        <div class="form-group form-inline row validation-input-container">
            <div class="col-sm-4 col-md-2">
                <span id="day-1-help-block" class="help-block">Day</span>
                <input id="day-1" class="form-control" type="text" value="13" name="Day" aria-describedby="day-1-help-block" aria-labelledby="day-month-year" data-msg-number="The field Day must be a number." data-msg-range="Please enter a valid Day." data-msg-required="Day is a required field." data-rule-number="true" data-rule-range="[1,31]" data-rule-required="true" aria-required="true" required="required" />
            </div>
            <div class="col-sm-4 col-md-2">
                <span id="month-1-help-block" class="help-block">Month</span>
                <select id="month-1" class="form-control" name="Month" role="combobox" aria-describedby="month-1-help-block" aria-labelledby="day-month-year" data-msg-number="The field Month must be a number." data-msg-range="Please enter a valid Month." data-msg-required="Month is a required field." data-rule-number="true" data-rule-range="[1,12]" data-rule-required="true" aria-required="true" required="required">
                    <option value=""></option>
                    <option value="1">January</option>
                    [...]
                    <option value="12">December</option>
                </select>
            </div>
            <div class="col-sm-4 col-md-2">
                <span id="year-1-help-block" class="help-block">Year</span>
                <input id="year-1" class="form-control"  type="text" value="1987" name="Year" aria-describedby="year-1-help-block" aria-labelledby="day-month-year" data-msg-max="Please enter a valid Year." data-msg-min="Please enter a valid Year." data-msg-number="The field Year must be a number." data-msg-required="Year is a required field." data-rule-max="2017" data-rule-min="1900" data-rule-number="true" data-rule-required="true" aria-required="true" required="required" />
            </div>
        </div>
        <label class="control-label required" for="date-picker-1">Date Picker</label>
        <span class="help-block"></span>
        <div class="col-xs-3 input-group date validation-input-container form-group" data-provide="datepicker">
            <input id="date-picker-1" type="text" class="form-control" value="01/01/2001" data-rule-required="true" placeholder="dd/mm/yyyy" data-date-format="dd/mm/yyyy" data-rule-dateita="true" aria-required="true" required="required" />
            <div class="input-group-addon">
                <span class="cfaicon-calendar"></span>
            </div>
        </div>
        <div id="date-range-label" class="control-label form-group required">Select A Date Range</div>
	    <div id="date-range-picker-help-block" class="help-block text-danger" >Date range help text.</div>
	    <div id="date-range-picker" class="input-daterange input-group form-group validation-input-container">
	        <div><input type="text" id="start-date" class="form-control" name="StartDate" value="" placeholder="mm/dd/yyyy" aria-labelledby="date-range-label" data-msg-dateita="The field StartDate must be a date." data-rule-dateita="true" data-msg-required="Start Date is required." data-rule-required="true" aria-required="true" required="required" /></div>
	        <div class="input-group-addon"><span>to</span></div>
	        <div><input type="text" id="end-date" class="form-control" name="EndDate" value="" placeholder="mm/dd/yyyy" aria-labelledby="date-range-label" data-msg-dateita="The field EndDate must be a date." data-msg-comparedates="End Date must occur on or after Start Date." data-rule-comparedates="#start-date" data-rule-date="true" data-msg-required="End Date is required." data-rule-required="true" aria-required="true" required="required" /></div>
        </div>
    </div>
</fieldset>

Problem Being Solved

The user needs to enter a single date value.

When to Use

  • Because the default order for day and month varies globally, separate day and month fields are preferred for user-facing forms. This pattern requires more clicks but reduces the chance of error.
  • The date picker pattern can be used if speed is more important than accuracy, and the date is likely to be recent.

Note about Date Range Picker

  • Date range picker is made up of two single datepickers combined into one and mostly used for "from" and "to" dates. A validation method called "comparedates" was created specifically to compare dates from these two inputs.
  • These date range pickers only use "mm/dd/yyyy" format unlike our global datepicker format "dd/mm/yyyy." This was done due to a limitation where only mm/dd/yyyy formats can be converted to JavaScript Date object for comparison.

Usage

Add data-rule-comparedates="#start-date" to the second date input where start-date is the ID for the first date input.

When Not to Use

In general, the date entry field pattern should be used.

Formatting

  • Set ViewBag.datepicker = true to load the script.
  • These formats are currently supported: dd/mm/yyyy, mm/dd/yyyy, mm/yyyy
  • If you do not have any text for the <span class="help-block"></span> tags, remove this element to avoid weird spacing issues.

File Upload

File Upload
Upload a file If specific file types are required, say that here. (Currently set to JPG or PNG)
Remove a file If a form loads and a file already exists Remove
Multiple Files Hold ctrl to select multiple files from the pop up

HTML

<fieldset>
    <legend>File Upload</legend>
    <div class="form-group">
        <label class="control-label">Upload a file</label>
        <span class="help-block">If specific file types are required, say that here.</span>
        <input type="file" name="file" id="file" accept="image/png, image/jpeg" />
        <label for="file"><span class="selected-file"></span><span class="button">Browse</span></label>
    </div>
    <div class="form-group">
        <label class="control-label">Remove a file</label>
        <span class="help-block">If a form loads and a file already exists</span>
        <input type="file" name="file" id="file-two" accept="image/png, image/jpeg" />
        <label for="file-two"><span class="selected-file">name_of_file.png</span><span class="button">Browse</span></label>
        <a href="#" class="remove"><span class="cfaicon-x red"></span>Remove</a>
    </div>
</fieldset>

Problem Being Solved

We need a way to allow users to upload files.

When to Use

  • This pattern should be used when a user needs to upload an profile image or documentation regarding registration.
  • If a file has already been uploaded, add a "remove" link below and add the file name only to the label, not the input.

When Not to Use

There are limited times when we accept user files, so this control will be used rarely.

Formatting

  • Fully customizing styles for this type of input will require javascript. When the script loads, it will add a class "js" to the <input> element.
  • If no javascript, the default browser control will display.
  • The script is currently included in cfa.global.js
  • Be sure to update the "accept" attribute to only take what is requested. This attribute will take any file extension or MIME type.